<template>
	<view class="s-page">
		<!-- 配置参数部分 -->
		<view class="s-content-view">
			<view class="s-label-view">
				<text>参数配置</text>
			</view>
			<!-- 视频路径 -->
			<view class="s-label-content">
				<text class="label-text">视频路径：</text>
				<input type="text" class="s-input"
					v-model="videoPath" placeholder="请输入视频路径"/>
			</view>
			<view class="s-button-view">
				<button class="s-button" type="primary" @click="getVideoThumbUrl">获取缩略图</button>
			</view>
			<!-- 返回结果 -->
			<view class="s-result-view" v-if="resultImage">
				<image :src="resultImage" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	// 获取 module 
	// #ifdef APP-PLUS
	let JMedia = uni.requireNativePlugin('J-MediaModule')
	// #endif
	export default {
		data() {
			return {
				videoPath: '/storage/emulated/0/DCIM/Camera/TG-2022-12-29-0326343121672255618838.mp4',
				startPosition: 1,
				endPosition: 2,
				resultImage: ''
			}
		},
		computed: {
			switchStyle() {
				return 'margin-left: -12upx;transform:scale(0.7)'
			},
			checkStyle() {
				return 'transform:scale(0.7)'
			}
		},
		methods: {
			/**
			 * 获取缩略图
			 */
			getVideoThumbUrl() {
				JMedia.getVideoThumbUrl({
					// 需要获取的本地视频的路径，支持网络地址
					videoPath: this.videoPath
				}, res => {
					// res.flag 为true，代表打开成功，false为失败
					// res.msg 成功失败的msg
					this.resultImage = 'file://' + res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}
	// 主内容
	.s-content-view {
		padding: 32upx;
		
		.s-input {
			height: 80upx;
			border-bottom: 1upx solid #e1e1e1;
		}
	}
	
	.s-label-view {
		border-left: solid #007aff 6upx;
		margin-bottom: 26upx;
		text {
			font-size: 30upx;
			color: #888888;
			padding-left: 16upx;
		}
	}
	// 标签和内容
	.s-label-content {
		display: flex;
		align-items: center;
		padding-bottom: 16upx;
		.label-text {
			width: 230upx;
			font-size: 30upx;
			color: #343434;
		}
		input {
			flex: 1;
		}
	}
	// 按钮组
	.s-button-view {
		display: flex;
		padding-top: 16upx;
		.s-button {
			width: 100%;
		}
	}
	
	.s-button {
		height: 70upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
	}
	
	// 返回结果
	.s-result-view {
		margin-top: 26upx;
		border: 1upx solid #e1e1e1;
		border-radius: 14upx;
		padding: 14upx;
		background-color: #e9e9e9;
		text {
			font-size: 30upx;
			color: #636463;
			word-wrap: break-word;
			word-break: break-all;
		}
	}
</style>